<script setup>
import { ref } from "vue";
import DeomDefault from "./demo/DeomDefault.vue";
import DemoCollapsed from "./demo/DemoCollapsed.vue";
import DemoZoom from "./demo/DemoZoom.vue";
import DemoLink from "./demo/DemoLink.vue";

const navs = ref([
  {
    title: "基本用法",
    component: DeomDefault,
  },
  {
    title: "展开、收起树节点",
    component: DemoCollapsed,
  },
  {
    title: "缩放",
    component: DemoZoom,
  },
  {
    title: "连接线",
    component: DemoLink,
  },
]);
const comp = ref(DeomDefault);

const navTo = item => comp.value = item.component;
</script>

<template>
  <div>
    <div class="nav">
      <ul>
        <li 
          v-for="item in navs" 
          @click="() => navTo(item)">
          {{ item.title}}
        </li>
      </ul>
    </div>
    <component :is="comp" />
  </div>
</template>
